<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form size="small" inline label-width="100px">
            <el-form-item label="订单状态：">
              <el-radio-group v-model="tableFrom.status" type="button" @change="getList(1)">
                <el-radio-button label="">全部</el-radio-button>
                <el-radio-button
                  label="0"
                >待发货</el-radio-button>
                <el-radio-button
                  label="1"
                >已发货</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="时间选择：" class="width100">
              <el-radio-group
                v-model="tableFrom.date"
                type="button"
                class="mr20"
                size="small"
                @change="selectChange(tableFrom.date)"
              >
                <el-radio-button
                  v-for="(item,i) in fromList.fromTxt"
                  :key="i"
                  :label="item.val"
                >{{ item.text }}</el-radio-button>
              </el-radio-group>
              <el-date-picker
                v-model="timeVal"
                value-format="yyyy/MM/dd"
                format="yyyy/MM/dd"
                size="small"
                type="daterange"
                placement="bottom-end"
                placeholder="自定义时间"
                style="width: 250px;"
                @change="onchangeTime"
              />
            </el-form-item>
            <el-form-item label="关键字：" class="width100" style="display: inline-block;">
              <el-input
                v-model="tableFrom.keywords"
                @keyup.enter.native="getList(1)"
                placeholder="请输入订单号/收货人/联系方式"
                class="selWidth"
                size="small"
              >
                <el-button slot="append" icon="el-icon-search" size="small" class="el-button-solt" @click="getList(1)" />
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <el-table
        :data="tableData.data"
        style="width: 100%"
        size="mini"
        class="table"
        highlight-current-row
      >
        <el-table-column label="订单编号" min-width="170">
          <template slot-scope="scope">
            <span style="display: block;" v-text="scope.row.order_sn" />
            <span v-show="scope.row.is_del > 0" style="color: #ED4014;display: block;">用户已删除</span>
          </template>
        </el-table-column>
        <el-table-column label="收货人" prop="real_name" min-width="100"></el-table-column>
        <el-table-column label="电话" prop="user_phone" min-width="170"></el-table-column>
        <el-table-column label="领取数量" prop="buy_count" min-width="60"></el-table-column>
        <el-table-column label="金额" prop="pay_price" min-width="60"></el-table-column>
        <el-table-column label="时间" prop="create_time" min-width="200"></el-table-column>
        <el-table-column label="支付方式" prop="pay_type" min-width="100">
          <template slot-scope="scope">
            <span>{{ payTypes.get(scope.row.pay_type) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户" prop="uid" min-width="100"></el-table-column>
        <el-table-column label="操作" min-width="100" fixed="right">
          <template slot-scope="scope">
            <el-button v-if="scope.row.order_sn" type="text" size="small" @click="onOrderDetails(scope.row)">详情</el-button>
            <el-button v-if="scope.row.send_status == 0" type="text" size="small" @click="showExpressDelivery(scope.row)">发货</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :page-sizes="[20, 40, 60, 80]"
          :page-size="tableFrom.limit"
          :current-page="tableFrom.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div>
      <!-- 领卡订单详情 -->
      <el-dialog
      title="订单信息"
      :visible.sync="dialogVisible"
      width="700px"
      v-if="dialogVisible"
    >
      <div>
        <div class="description" v-if="orderDatalist">
          <div class="title">收货信息<svg-icon icon-class="copy" title="一键复制" @click="copyOrder"/></div>
          <div class="acea-row">
            <div class="description-term">收货人：{{ orderDatalist.real_name }}</div>
            <div class="description-term">收货电话:{{ orderDatalist.user_phone }}</div>
            <div class="description-term">收货地址：{{ orderDatalist.user_address }}</div>
            <div class="description-term">购买数量：{{ orderDatalist.buy_count }}</div>
          </div>
          <el-divider />
          <div class="title">订单信息</div>
          <div class="acea-row">
            <div class="description-term">订单编号：{{ orderDatalist.order_sn }}</div>
            <div class="description-term">创建时间：{{ orderDatalist.create_time }}</div>
            <div class="description-term">支付金额：{{ orderDatalist.pay_price }}</div>
            <div class="description-term">支付方式：{{ payTypes.get(orderDatalist.pay_type) }}</div>
            <div class="description-term">物流名称：{{  orderDatalist.delivery_name }}</div>
            <div class="description-term">物流单号：{{ orderDatalist.delivery_id}}</div>
          </div>
        </div>
      </div>
    </el-dialog>
      <!-- 发货详情 -->
    <el-dialog
      title="物流查询"
      :visible.sync="dialogLogistics"
      width="350px"
      :before-close="hangdleClose"
      v-if="dialogLogistics"
    > 
      <el-form :model="deliveryData" :rules="rules" ref="ruleForm">
        <div class="logistics acea-row row-top">
          <div class="logistics_img"><img src="@/assets/images/expressi.jpg"></div>
          <div class="logistics_cent">
            <el-form-item prop="delivery_name" label="物流公司">
              <el-input
                placeholder="物流公司"
                v-model="deliveryData.delivery_name"
                clearable>
              </el-input>
            </el-form-item>
            <el-form-item prop="delivery_id" label="物流单号">
              <el-input
                placeholder="物流单号"
                v-model="deliveryData.delivery_id"
                clearable>
              </el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="hangdleClose">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
        </span>
    </el-dialog>
    </el-card>
  </div>
</template>
<script>
import { fromList } from "@/libs/constants.js";
import { payTypes } from "@/libs/phone";
import { getPhoneOrderList, sendOutGoods } from "@/api/phone";
export default {
  name: 'receiveCar',
  data() {
    return {
      tableFrom: {
        status: '',
        date: '',
        keywords:'',
        page: 1,
        limit: 20,
      },
      tableData: {
        data: [],
        total:0
      },
      deliveryData: {
        delivery_name: '',
        delivery_id:''
      },
      orderChartType: {},
      fromList: fromList,
      timeVal: [],
      listLoading: false,
      payTypes: payTypes,
      sendGoodsStatus: false,
      infoStatus: false,
      infoData: {},
      orderId: '',
      dialogVisible: false,
      sendFormData: {
        
      },
      orderDatalist: null,
      dialogLogistics: false,
      rules: {
          delivery_name: [
            { required: true, message: '请输入物流公司', trigger: 'blur' },
          ],
          delivery_id: [
            { required: true, message: '请输入物流单号', trigger: 'blur' }
          ],
      }
    }
  },
  mounted() {
    this.getList('')
  },
  methods: {
    // 列表
    getList(num) {
      this.listLoading = true;
      this.tableFrom.page = num ? num : this.tableFrom.page;
      getPhoneOrderList(this.tableFrom)
        .then((res) => {
          this.tableData.data = res.data.list;
          this.tableData.total = res.data.count;
        //   this.cardLists = res.data.stat;
          this.listLoading = false;
        })
        .catch((res) => {
          this.$message.error(res.message);
          this.listLoading = false;
        });
    },
    // 选择时间
    selectChange(tab) {
      this.tableFrom.date = tab;
      this.tableFrom.page = 1;
      this.timeVal = [];
      this.getList(1);
    },
    onchangeTime(e) {
      this.timeVal = e;
      this.tableFrom.date = e ? this.timeVal.join("-") : "";
      this.tableFrom.page = 1;
      this.getList(1);
    },
    //查看订单详情
    onOrderDetails(row) {
      this.orderDatalist = row
      this.dialogVisible = true
    },
    //展示发货详情
    showExpressDelivery(row) { 
      this.orderDatalist = row
      this.dialogLogistics = true
    },
    //发货
    sendOutGoods() {
      const param = {
        order_id : this.orderDatalist.order_id,
        delivery_id: this.deliveryData.delivery_id,
        delivery_name: this.deliveryData.delivery_name
      } 
      sendOutGoods(param).then(async (res) => { 
        this.$message.success('操作成功');
        this.dialogLogistics = false;
        this.getList(1);
        this.hangdleClose()
      }).catch((res) => {
        this.$message.error(res.message)
      })
    },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.sendOutGoods()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    copyOrder() {   
      const text = `收货人：${this.orderDatalist.real_name ? this.orderDatalist.real_name: '' }\t\t收货电话：${this.orderDatalist.user_phone ? this.orderDatalist.user_phone: ''}\r\n收货地址：${this.orderDatalist.user_address ? this.orderDatalist.user_address : '' }\t\t购买数量：${this.orderDatalist.buy_count ? this.orderDatalist.buy_count : 0}\r\n`
      const _that  = this
      navigator.clipboard.writeText(text).then(function() {
        _that.$message.success('复制成功')
      }, function() {
        _that.$message.error('复制失败')
      });
    },
    pageChange(page) {
      this.tableFrom.page = page;
      this.getList('');
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val;
      this.getList('');
    },
    hangdleClose() { 
      this.deliveryData.delivery_id = ''
      this.deliveryData.delivery_name = ''
      this.dialogLogistics = false
    }
  }
}
</script>

<style scoped lang="scss">

.title{
  margin-bottom: 16px;
  color: #17233d;
  font-weight: 500;
  font-size: 14px;
}
.description{
  &-term {
    display: table-cell;
    padding-bottom: 10px;
    line-height: 20px;
    width: 50%;
    font-size: 12px;
  }
  .svg-icon{
    height: 14px !important;
    width: 14px !important;
    margin-left: 4px;
  }
}
.logistics{
  align-items: center;
  padding: 10px 0px;
  flex-flow: nowrap;
  align-items: start;

  .logistics_img{
    min-width: 45px;
    height: 45px;
    margin-right: 12px;
    margin-top: 18px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .logistics_cent{
    span{
      display: block;
      font-size: 12px;
    }
  }
}
.trees-coadd{
  width: 100%;
  height: 400px;
  border-radius: 4px;
  overflow: hidden;
  .scollhide{
    width: 100%;
    height: 100%;
    overflow: auto;
    margin-left: 18px;
    padding: 10px 0 10px 0;
    box-sizing: border-box;
    .content{
      font-size: 12px;
    }
    .time{
      font-size: 12px;
      color: #2d8cf0;
    }
  }
}
.scollhide::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
</style>